<template>
    <div class="home-container">
        <van-nav-bar class="page-nav-bar" fixed>
            <template #title>
                <van-button class="search-btn" icon="search" size="18" round
                to="/search">搜索</van-button>
            </template>
        </van-nav-bar>

        <van-tabs class="channel-tabs" v-model:active="active" animated swipeable >
            <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
                <article-list :channel="channel"/>
                <!-- {{channel.name}} -->
            </van-tab>

            <template #nav-right>
                <div class="placeholder"></div>
                <div class="hamburger-btn">
                    <van-icon class="toutiao-gengduo"  name="apps-o" @click="isChannelEditShow=true"></van-icon>
                </div>
            </template>
            
        </van-tabs>
        <van-popup
            v-model:show="isChannelEditShow"
            round
            closeable
            close-icon-position="top-left"
            position="bottom"
            :style="{ height: '100%' }"
            >
            <channel-edit :myChannel="channels" :isActive="active" @update-active="updateActiveEmit"/>
        </van-popup>

    </div>
</template>
<script>
import { getUserChannels } from '@/apis/user.js'
import { showFailToast } from 'vant'
import { mapState } from 'vuex'
import ArticleList from './component/article-list.vue'
import ChannelEdit from './component/channel-edit.vue'
import { getItem } from '@/utils/storage'

export default{
    created() {
        this.loadChannels()
    },
    data() {
        return {
            active:0,
            channels:[],
            isChannelEditShow: false
        }
    },
    components: {
        ArticleList,
        ChannelEdit
    },
    computed: { 
        ...mapState(['user'])
    },
    methods: {
        async loadChannels() {
           try {
                var channels = []
                if (this.user) {
                    const { data: res} =  await getUserChannels()
                    channels = res.data.channels
                } else {    //未登录
                    if (getItem('TOUTIAO_CHANNEL')) {
                        channels = getItem('TOUTIAO_CHANNEL')
                    } else {
                        const { data: res} =  await getUserChannels()
                        channels = res.data.channels
                    }
                }
                this.channels = channels
           } catch (error) {
                console.log(error);
                return showFailToast('获取频道数据失败')
           }
        },
        updateActiveEmit(index,isChannelEditShow = true) {
            this.active = index
            this.isChannelEditShow = isChannelEditShow
        }
    }
    
}
</script>
<style scoped lang="less" >
    
    .home-container {
        padding-top: 87px;
        margin-bottom: 50px;
         :deep(.van-nav-bar__title) {// https://blog.csdn.net/fangfangtulk/article/details/117356490 ::v-deep
           max-width: unset ;
        }
        
        
        .search-btn {
            width: 300px;
            height: 32px;
            background-color: #5babfb;
            border: none;
            font-size: 18px;
            color: #fff;
        }
       /deep/ .channel-tabs {
        .van-tabs__wrap {
            position: fixed;
            top: 46px;
            left: 0;
            right: 0;
            z-index: 1;
            height: 41px;
            background-color: red;
        }
        .van-tab--active {
            color: #3296fa !important;
        }
        .van-tab {
            border-right: 1px solid #edeff3;
            min-width: 100px;
            font-size: 15px;
            color: #777;
        }
        .van-tabs__nav {
            padding-bottom: 0px;
        }
        .van-tabs__line {
            width: 20px;
            height: 3px;
            background-color: #3296fa;
            bottom: 4px;
        }
        .placeholder {
            flex-shrink: 0;
            width: 33px;
            height: 41px;

        }
        .hamburger-btn {
            position: fixed;
            right: 0;
            width: 41px;
            height: 41px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #FFF;
            opacity: 0.9;
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 1px;
                height: 100%;
                background: url(@/assets/gradient-gray-line.png);
                background-size: contain;
            }
        }
       }
    }
</style>